import React, { useState } from 'react';
import classNames from 'classnames';
import { MenuContext } from './menu.tsx';
import { MenuItemProps } from './menuItem';
import Icon from '../Icon/icon.tsx';
import { CSSTransition } from 'react-transition-group';

export interface SubMenuProps {
    /** 菜单项的索引值 */
    index?: number;
    /** 菜单项的禁用状态 */
    title: string;
    className?: string;
    children?: React.ReactNode;
}

const SubMenu = (props: SubMenuProps) => {
    const { index, title, className, children } = props;
    const context = React.useContext(MenuContext);



    const [menuOpen, setMenuOpen] = useState(false);
    const handleClick = (e: React.MouseEvent) => {
        e.preventDefault();
        setMenuOpen(!menuOpen);
    }

    const classes = classNames('menu-item', 'submenu-item', className, {
        'is-active': context.index === index,
        'is-opened': menuOpen,
        'is-vertical': context.mode === 'vertical',
    })

    let timer: NodeJS.Timeout;
    const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
        e.preventDefault();
        clearTimeout(timer);
        timer = setTimeout(() => {
            setMenuOpen(toggle);
        }, 300);
    }

    const clickEvents = context.mode === 'vertical' ? {
        onClick: handleClick,
    } : {}

    const hoverEvents = context.mode === 'horizontal' ? {
        onMouseEnter: (e: React.MouseEvent) => { handleMouse(e, true) },
        onMouseLeave: (e: React.MouseEvent) => { handleMouse(e, false) },
    } : {}


    const renderChildren = () => {
        const subMenuClass = classNames('submenu', {
            'menu-opened': menuOpen,
        })
        // console.log('subMenuClass', subMenuClass)
        const childElementComponent = React.Children.map(children, (child, index) => {
            const childElement = child as React.FunctionComponentElement<MenuItemProps>;
            if (childElement.type.displayName === 'MenuItem') {
                return React.cloneElement(childElement, {
                    index: index,
                })
            } else {
                console.error("Warning: SubMenu has a child which is not a MenuItem")
            }
        })

        return (
            // <div>
            //     <CSSTransition
            //         in={menuOpen}
            //         timeout={300}
            //         classNames="zoom-in-top"
            //         appear={true}
            //         unmountOnExit
            //     >

            //             <ul className={subMenuClass} >
            //                 {childElementComponent}
            //             </ul>
            //     </CSSTransition>
            // </div>
            <ul className={subMenuClass} >
                {childElementComponent}
            </ul>


        )
    }

    return (
        <li key={index} className={classes} {...hoverEvents}>
            <div className="submenu-title" {...clickEvents}>
                {title}
                <Icon icon={"angle-down"} className='arrow-down-icon'></Icon>
            </div>
            {renderChildren()}
        </li>
    )

}

SubMenu.displayName = 'SubMenu';


export default SubMenu;